<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commonjsp/jstl.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>工单管理</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/theme.css">
<link rel="stylesheet" type="text/css" href="${prefix}/stylesheets/reveal.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/jqueryui/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/jqueryui/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="${prefix}/lib/jqueryui/jquery-ui.theme.css">

<script src="${prefix}/lib/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="${prefix}/lib/ajaxfileupload.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery-form.js" type="text/javascript"></script>
<script src="${prefix}/lib/jquery.reveal.js" type="text/javascript"></script>
<script src="${prefix}/lib/jqueryui/jquery-ui.js" type="text/javascript"></script>
<!-- Demo page code -->
<style>
.column {
	width: 340px;
	float: left;
	padding-bottom: 5px;
}
.portlet {
	margin: 0 1em 1em 0;
	padding: 0.3em;
}
.portlet-header {
	padding: 0.2em 0.3em;
	margin-bottom: 0.5em;
	position: relative;
}
.portlet-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -8px;
}
.portlet-content {
	padding: 0.4em;
	font-size: 18;
	line-height: 24px;
}
.portlet-placeholder {
	border: 1px dotted black;
	margin: 0 1em 1em 0;
	height: 300px;
}
</style>
<script type="text/javascript">
$(function() {	
	//准备弹出对话框
	$("#pickingTotalAmount").dialog({
		resizable: false,
		height: 280,
		width: 360,
		modal: true,
		autoOpen: false,
		show: {
		  effect: "blind",
		  duration: 300
		},
		hide: {
		  effect: "explode",
		  duration: 300
		}
	});
	
	$("#picking_totalAmount").keyup(function(e) {
		var totalAmount = $.trim($("#picking_totalAmount").val());
		if(e.keyCode == 13) {
			doPickingDone();
		}
	});
});

//每20秒钟，进行依次新数据的扫面
setInterval("doscan()",20000);

function doscan() {
	//首先查询目前数据库中存储的，该店面需要进行“配货”的消费服务单
	$.ajax({
		url: "${prefix}/order/queryPickingOrder",
		async: false,
		dataType: "json",
		success: function(data) {
			//错误信息
			if(data.responsecode != "E200") {
				alert(data.errorinfo);
				return;
			}
			
			//======然后和目前已经建立的“带配货工单”进行对比。将没有展示在页面上的，进行生成和展示
			var allorderinfos = data.data;
			var vieworderinfos = $("div[name='orderinfo']");
			for(var index = 0 ; allorderinfos != null && vieworderinfos != null && index < allorderinfos.length ; index++) {
				var allorderinfo = allorderinfos[index];
				var mustShow = true;
				for(var sum = 0 ; sum < vieworderinfos.length ; sum++) {
					var vieworderinfo = vieworderinfos[sum];
					var vieworderinfoid = $(vieworderinfo).attr("orderinfoid");
					//如果条件成立，说明不需要进行展示了，因为页面上已经展示了
					if(allorderinfo.uid == vieworderinfoid) {
						mustShow = false;
						break;
					}
				}
				//不需要展示，则首层循环继续下一个元素
				if(!mustShow) {
					continue;
				}
				
				//如果代码进行到这里了，说明需要进行展示
				var orderinfoid = allorderinfo.uid;
				var roomNo = allorderinfo.roomNo;
				var createTime = allorderinfo.createTime;
				var commoditys = allorderinfo.commoditys;
				var htmlop = "<div name=\"orderinfo\" class=\"column\" orderinfoid=\"" + orderinfoid + "\" id=\"column_" + orderinfoid + "\">";
				htmlop += "<div class=\"portlet\" id=\"portlet_" + orderinfoid + "\">";
				htmlop += "<div class=\"portlet-header\" id=\"portlet-header_" + orderinfoid + "\"></div>";
				htmlop += "<div class=\"portlet-content\" id=\"portlet-content_" + orderinfoid + "\">";
				htmlop += "<font style=\"color: #DD8811\">";
				htmlop += "房间号：" + roomNo + " <br/>";
				htmlop += "创建时间：" + createTime + "<br/>";
				htmlop += "</font>";
				htmlop += "<table class=\"table\" id=\"table_" + orderinfoid + "\">";
				htmlop += "<thead><tr><th>商品名称-简称</th><th>数量</th></tr></thead>";
				htmlop += "<tbody>";
				//商品信息说明
				for(var cindex = 0 ; commoditys != null && cindex < commoditys.length ; cindex++) {
					var commoditym = commoditys[cindex];
					var commodity = commoditym.commodify;
					htmlop += "<tr><td>" + commodity.commodityName + "-" + commodity.sortName + "</td><td>" + commoditym.commodifyNumber + "</td></tr>";
				}
				htmlop += "</tbody>";
				htmlop += "</table>";
				htmlop += "</div>";
				htmlop += "</div>";
				htmlop += "</div>";
				
				//加入显示层
				$("#span9").append(htmlop);
				//加载样式
				$("#column_" + orderinfoid).sortable({
					connectWith : "#column_" + orderinfoid,
					handle : "#portlet-header_" + orderinfoid ,
					cancel : "#portlet-toggle_" + orderinfoid,
					placeholder : "portlet-placeholder ui-corner-all"
				});

				$("#portlet_" + orderinfoid)
				.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
				.find("#portlet-header_" + orderinfoid)
				.addClass("ui-widget-header ui-corner-all")
				.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle' id=\"portlet-toggle_" + orderinfoid + "\"></span>")
				.prepend("<a id=\"portlet-toggle-over_" + orderinfoid + "\" onclick=\"perPickingDone('" + orderinfoid + "')\" class=\"btn\" style=\"margin-right: 10px;color: #8899aa\">完成</a>");

				$("#portlet-toggle_" + orderinfoid).click(function() {
					var icon = $(this);
					icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
					icon.closest(".portlet").find(".portlet-content").toggle();
				});
			}
		}
	});
}

//配货完成后的方法(提交服务器前)
function perPickingDone(orderinfoid) {
	//显示对话框，输入货物的消费总金额（非核算总金额）
	$("#pickingTotalAmount").dialog("open");
	$("#picking_orderinfoid").val(orderinfoid);
}

//配货完成后的方法(提交服务器)
function doPickingDone() {
	var orderinfoid = $("#picking_orderinfoid").val();
	var totalAmount = $("#picking_totalAmount").val();
	var pattern = /^[\d]+[.]?[\d]{1,2}$/;
	if(!pattern.test(totalAmount)) {
		$("#picking_totalAmount_error").css("display","");
		$("#picking_totalAmount_error").html("应付总金额只能为数字，且精确到‘分’");
		return;
	} else {
		$("#picking_totalAmount_error").css("display","none");
		$("#picking_totalAmount_error").html("");
	}
	
	//调用服务端，更新工单配货状态和应付总金额
	$.ajax({
		url: "${prefix}/order/updatePickingStatus?orderinfoid=" + orderinfoid + "&totalAmount=" + totalAmount,
		async: false,
		dataType: "json",
		success: function(data) {
			//错误信息
			if(data.responsecode != "E200") {
				alert(data.errorinfo);
				return;
			}
			
			//点击“完成”按钮的时候，ajax将更新该条记录的“pickingStatus”属性。这个待办的“配货单”将在界面上消失
			$("#portlet-toggle-over_" + orderinfoid).parent().parent().parent().remove();
			$("#pickingTotalAmount").dialog("close");
			$("#picking_orderinfoid").val("");
			$("#picking_totalAmount").val("");
		}
	});
}
</script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="${prefix}/javascripts/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="${prefix}/lib/font-awesome/docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="${prefix}/lib/font-awesome/docs//assets/ico/apple-touch-icon-57-precomposed.png">
</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<body>
<!--<![endif]-->

<div class="navbar">
	<%@ include file="/commonjsp/userbar.jsp"%>
</div>

<div class="container-fluid">
	<div class="row-fluid">
		<%@ include file="/commonjsp/mainmenu.jsp"%>
		<!-- 列表 -->
		<div class="span9" id="span9">
			<!-- 列表头 -->
			<h1 class="page-title">消费工单配货</h1>
		</div>
	</div>
	
	<!-- 工单配货完成时，确定和输入应付款价格的窗口 -->	
	<div id="pickingTotalAmount">
		<input id="picking_orderinfoid" type="hidden"/>
		<label style="padding: 5px;margin: 0px;">应付总金额：</label>
		<label style="padding: 5px;margin: 0px;">
			<input type="text" value="" id="picking_totalAmount" maxlength="20" style="width: 180px ; height: 30px ; padding: 0px ; margin: 0px;"/>
		</label>
		<label id="picking_totalAmount_error" style="padding: 5px;margin: 0px;display:none;color: #FF0000;font-weight: bold;">
			
		</label>
		<label style="padding: 5px;margin: 0px;">
			<a href="javascript:void(0);" onclick="doPickingDone()" id="PickingDoneButton" class="btn"><i class="icon-save"></i> 完 成 </a>
		</label>
	</div>
	
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${prefix}/lib/bootstrap/js/bootstrap.js"></script>
</div>
</body>
</html>